<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>v-show指令</title>
  </head>
  <body>
    <!-- 条件渲染
            1.v-if
              写法：
                1)v-if='表达式'
                2)v-else-if='表达式'
                3)v-else='表达式'
              适用于切换频率低的场景
              特点：不展示的DOM元素直接移除
              注：v-if可以和v-else-if、v-else一起使用，但要求结构不能被其他DOM元素中断
            2.v-show
              写法：v-show='表达式'
              适用于切换频率高的场景
              特点：不展示的DOM元素不被移除，仅仅是使用样式进行了隐藏
            3.注：使用v-if时，元素可能无法获取到，使用v-show一定可以获取到 -->
    <div id="root">
      <button @click="toggleIsShow">切换显示</button>
      <button @click="addAge">增加</button>
      <img src="../v-html.jpg" alt="v-html" v-show="isShow" />
      <img src="../v-html.jpg" alt="v-html" v-show="age>=18" />
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#root",
        data: {
          isShow: false,
          age: 17,
        },
        methods: {
          toggleIsShow: function () {
            this.isShow = !this.isShow;
          },
          addAge: function () {
            this.age++;
          },
        },
      });
    </script>
  </body>
</html>
